<template>
    <div id="forecast-chart" class="forecast-chart">

    </div>
</template>
<script>
import {option,initDayCharts} from './option';
import * as echarts from "echarts";
export default {
    props: {
        xdata:{
            type:Object,
            default:()=>({x1:[],x2:[]})
        }
    },
    data() {
        return { option, chart: {} }
    },
    mounted() {  },
    methods: {
        initChart() {
            var chartDom = document.getElementById('forecast-chart');
            this.chart = echarts.init(chartDom);
            this.chart.clear()
            this.chart.setOption(initDayCharts(this.xdata.x2,this.xdata.x1,"1",window.screen.width));
        }
    },
    watch: {
        xdata(new_val, old_val) {
            if (JSON.stringify(new_val)!== JSON.stringify(old_val)) {
                this.initChart()
            }
        }
    }

}
</script>
<style scoped>
.forecast-chart {
    width: 100%;
    height: 100%;
}
</style>